CSS in JS黎明期から2023年までの螺旋
#CSS #構造化CSS設計
---
歴史(過去)を話す
---
@o_gi: Bootstrap書きまくってたLessファンボのAdam Wathan氏がTailwindを生み出してModulzがRadixとStitches(なにげにColorsとIconsも凄い)を作ってその後にModulzはアレでCSS in JSはちょっと残念な事になってる感はあるがVariantsはcva等に引き継がれてclsxやtailwind-mergeをフル活用したshadcn/uiが…
@o_gi: おそらく今後はRadixライクなPrimitivesを昇華させたともう言っても良いかもしれないshadcn/uiのアレがこの領域のスタンダードになっていくのだろうって予感もしてるのでこれからまたフォロワーが増えていくのだろうしそれをするのならTailwindに任せられる部分は丸投げしちゃうのはめっちゃ合理的。
@o_gi: 同様にKnexが無かったらKyselyは生まれてないかもしれないしGraphQL Code Generatorが無かったらGraphQLがここまで流行ってなかったかもしれないしもちろんViteやPostCSSも……つまり後発が良くなるのは当然なんだけど狭い観測だと皆さんめっちゃ敬意を持って謝辞の姿勢をしてる。そして私は只の消費者
@o_gi: でかい企業が組織的Evilパワー全開(褒め言葉)を見せつける系っての乙なんだけど……BunやtRPCやSolidやHonoなどの個人的天才が情熱を抑えられずにやってたら人と注目が集まってきてなんか凄い事になっちゃった!ってのもケミストリーですよね(おやすみなさい)
個人的天才が情熱を抑えられずにやってたら人と注目が集まってきてなんか凄い事になっちゃった
---
koushisa.icon
フロントエンドの荒れ果てたサバンナと化したCSS界隈、Reactがruntime css切り捨てる判断したことで方向性が明確になってきている
styled-componentsのissueで阿鼻叫喚になってるけど、自分がもしメンテナだったとしたら時代の流れだと受け入れて諦めちゃうかも
Nextjs 13 · Issue #3856 · styled-components/styled-components · GitHub
過去の技術の螺旋がどう回っているか
SPAにおけるCSSについてもう一つの解
CSS-in-JSのパラダイムシフト
---
~2018
CSSのグローバルスコープやカスケーディングの性質で無秩序だった
識者はBEM, OOCSSなどの構造化CSS設計でスコープ化していた
2018~2020
スタイリングのスコープを関数でカプセル化できるstyled-componentsが注目される
2020~
後発のEmotionが機能面や利便性で流行ってくる
CSS in JSのパフォーマンス上の懸念が出てくる
CSS in JSの書き味にペインを感じてきた人もでてくる
人それぞれの価値観で、Linaria, vanilla-extract, Sticthesなどライブラリ乱立期
「問題」と「課題感」と「解ける課題」は別物
生のcssを求めたCSS Modules派もいる
Tailwindも台頭してくる
カオスな時代スタート
2021~
デザインシステムトレンド
デザイントークンやVariant, レスポンシブデザインの構造化が求められる
vanilla-extract, Sticthes, Tailwindはデザインシステムを作る機能をサポートしていた
この部分で注目を浴びる
共通項を抽象化したcvaが登場する
スタイリングと、コンポーネント内のclass name割当の中間層となる存在
中間層を挟むことによりスタイリングの自由度が高まった
コードスニペットはインターネットに溢れているのに対しコードベースはすべてユニーク
2022~
a11yが再注目される
ユーザーエージェント(人間/コンピュータ)の多様性増加
テストのロケータの役割
a11yをデザインプロセスの一部にする
HTMLの機能とa11yを内包するHeadless UIコンポーネントが注目される
2023~
Headless UIとTailwindとcva組み合わせたりAtomic CSSなどの新しい思想が出てくる
shadcn/ui
Open Props
---
#TODO
https://www.notion.so/koushisa/856249f8e8404bf58f1cdfabcb578e75?pvs=4#094845e1c8384009b3d59177f615b85d